import React from 'react';
import { Card, Typography, Space, Divider, Row, Col, Image } from 'antd';
import {
    FunctionOutlined,
    AimOutlined,
    ExperimentOutlined,
    CheckCircleOutlined
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './index.module.css';

const { Title, Paragraph, Text } = Typography;

const JaccardIntroduction: React.FC = () => {
    // 生成集合可视化的示例数据
    // 替换原来的 getSetVisualizationOption 函数
    const getSetVisualizationOption = () => ({
        // title: {
        //     text: '集合A和集合B的示意图'
        // },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '集合关系',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: 'center',
                    formatter: 'Jaccard\n相似度'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: 20,
                        name: '交集',
                        itemStyle: { color: '#91d5ff' }
                    },
                    {
                        value: 30,
                        name: '仅属于集合A',
                        itemStyle: { color: '#d3adf7' }
                    },
                    {
                        value: 25,
                        name: '仅属于集合B',
                        itemStyle: { color: '#b7eb8f' }
                    }
                ]
            }
        ]
    });

    // 添加一个简单的条形图来展示集合大小比较
    const getSetComparisonOption = () => ({
        title: {
            text: '集合大小对比'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['元素数量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['集合A', '集合B', '交集', '并集']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '元素数量',
                type: 'bar',
                data: [
                    {
                        value: 50,
                        itemStyle: { color: '#d3adf7' }
                    },
                    {
                        value: 45,
                        itemStyle: { color: '#b7eb8f' }
                    },
                    {
                        value: 20,
                        itemStyle: { color: '#91d5ff' }
                    },
                    {
                        value: 75,
                        itemStyle: { color: '#ffd591' }
                    }
                ],
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    });

    return (
        <div className={styles.container}>
            <Card className={styles.mainCard}>
                <Typography>
                    <Title level={2}>
                        <FunctionOutlined /> Jaccard 相似度算法说明
                    </Title>

                    <Divider />

                    <section className={styles.section}>
                        <Title level={3}>
                            <AimOutlined /> 算法原理
                        </Title>
                        <Paragraph>
                            Jaccard相似度（也称为Jaccard系数）是用于衡量两个集合相似度的指标。它被定义为两个集合的交集大小除以它们的并集大小。
                            Jaccard相似度的取值范围在[0,1]之间，1表示两个集合完全相同，0表示两个集合没有共同元素。
                        </Paragraph>

                        <Row gutter={24} className={styles.formulaSection}>
                            <Col span={12}>
                                <Card className={styles.formulaCard}>
                                    <Title level={4}>计算公式</Title>
                                    <div className={styles.formula}>
                                        <Text code>
                                            J(A,B) = |A ∩ B| / |A ∪ B|
                                        </Text>
                                    </div>
                                    <Paragraph>
                                        其中：
                                        <ul>
                                            <li>|A ∩ B| 表示集合A和B的交集大小</li>
                                            <li>|A ∪ B| 表示集合A和B的并集大小</li>
                                            <li>结果范围：[0,1]</li>
                                        </ul>
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.visualizationCard}>
                                    <Title level={4}>集合关系可视化</Title>
                                    <ReactECharts option={getSetVisualizationOption()} style={{ height: '300px' }} />
                                </Card>
                            </Col>
                        </Row>

                        {/* 添加新的图表展示 */}
                        <Row gutter={24} style={{ marginTop: '24px' }}>
                            <Col span={24}>
                                <Card className={styles.visualizationCard}>
                                    <ReactECharts option={getSetComparisonOption()} style={{ height: '300px' }} />
                                </Card>
                            </Col>
                        </Row>
                    </section>
                    <section className={styles.section}>
                        <Title level={3}>
                            <ExperimentOutlined /> 应用场景
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>文本相似度分析</Title>
                                    <Paragraph>
                                        将文本转换为词集合，计算文档间的重叠程度，
                                        特别适用于短文本相似度计算和关键词匹配。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>基因序列比较</Title>
                                    <Paragraph>
                                        比较不同基因序列的相似度，
                                        用于生物信息学中的序列分析和分类。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>用户行为分析</Title>
                                    <Paragraph>
                                        分析用户的行为特征集合，
                                        用于用户画像和行为相似度计算。
                                    </Paragraph>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <CheckCircleOutlined /> 算法优势
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>计算简单直观</li>
                                        <li>适用于二进制特征</li>
                                        <li>不受集合大小影响</li>
                                        <li>结果易于解释</li>
                                    </ul>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>适合处理稀疏数据</li>
                                        <li>计算效率高</li>
                                        <li>支持增量计算</li>
                                        <li>不需要复杂的预处理</li>
                                    </ul>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <CheckCircleOutlined /> 实现细节
                        </Title>
                        <Card className={styles.implementationCard}>
                            <Title level={4}>基本步骤</Title>
                            <ol className={styles.stepsList}>
                                <li>
                                    <Text strong>集合构建：</Text>
                                    <Paragraph>
                                        将输入数据转换为集合形式，例如文本分词后的词集合。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>交集计算：</Text>
                                    <Paragraph>
                                        计算两个集合的共同元素数量。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>并集计算：</Text>
                                    <Paragraph>
                                        计算两个集合的所有不重复元素数量。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>相似度计算：</Text>
                                    <Paragraph>
                                        使用交集大小除以并集大小得到最终结果。
                                    </Paragraph>
                                </li>
                            </ol>
                        </Card>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>使用注意事项</Title>
                        <Card className={styles.noticeCard}>
                            <ul className={styles.noticeList}>
                                <li>对元素出现频率不敏感，只考虑存在与否</li>
                                <li>需要合理的数据预处理策略</li>
                                <li>对噪声数据较敏感</li>
                                <li>不适合处理连续型数值特征</li>
                                <li>计算结果可能受集合大小差异影响</li>
                            </ul>
                        </Card>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>更新信息</Title>
                        <Card className={styles.updateCard}>
                            <Paragraph>
                                <Text strong>最后更新时间：</Text> 2025-03-28 14:46:17 UTC
                            </Paragraph>
                            <Paragraph>
                                <Text strong>文档维护者：</Text> lijiajunjxstnu
                            </Paragraph>
                        </Card>
                    </section>
                </Typography>
            </Card>
        </div>
    );
};

export default JaccardIntroduction;
